<template>
  <backContainer>
    <div class="group_container">
      <div class="content">
        <template v-for="(item) in dataArr">
          <div class="content_left" v-if="item.typeName=='left'">
            <div class="left_top">
              <div class="courseName overTxt">
                <img class="icon" src="@/assets/images/group_icon/class_icon.png" alt="加载失败">
                <div class="text">
                  <tooltip position="top-start" :text="item.courseInfo.courseName" width="100%"/>
                </div>
              </div>
              <div class="className overTxt">
                <div class="text">
                  <tooltip position="top-start" :text="item.courseInfo.schedulingName" width="100%"/>
                </div>
              </div>
              <div class="all_class_person">
                <img class="icon" src="@/assets/images/group_icon/all_person_icon.png" alt="加载失败">
                <div class="text">全班人数 <span>{{ studentCount }}人</span></div>
              </div>
              <div class="application">
                <div class="detial">
                  <img class="icon" src="@/assets/images/group_icon/application_icon.png" alt="加载失败">
                  <div class="text">已报名 <span>{{ studyingCount }}人</span></div>
                </div>
                <div class="btn" @click="showAddStu">
                  添加学员
                </div>
              </div>
              <div @click="showGroupDialog" class="quick_group">
                <img class="icon" src="@/assets/images/group_icon/quick_icon.png" alt="加载失败">
                <div class="text">快速分组</div>
              </div>
            </div>
            <div class="left_bottom">
              <div class="title_box">
                <div class="title">
                  待分组 {{ item.groupList.length }}人
                </div>
              </div>

              <div class="stu_all">
                <vuedraggable
                  @change="handleChange"
                  v-model="item.groupList"
                  group="site"
                  animation="300"
                >
                  <div class="stu_item" v-for="groupItem in item.groupList" :key="item.studentId">
                    <div>{{ groupItem.studentName }}</div>
                    <div>{{ groupItem.studentNum }}</div>
                  </div>
                </vuedraggable>
              </div>
            </div>
          </div>
          <div v-loading="loading" class="content_right" v-if="item.typeName=='right'">
            <div class="group_tip">注：手动“完成剩余课程”的学生不可设置为组长</div>
            <div class="right_item_all" v-if="item.groupTotalList.length>0">
              <div :id="groupTotalItem.groupId" class="right_item" :class="groupTotalIndex%2==0?'purple_them':'orange_them'"
                   v-for="(groupTotalItem,groupTotalIndex) in item.groupTotalList" :key="'Total'+groupTotalIndex"
              >
                <div class="group_name">
                  <img v-if="groupTotalIndex%2!=0" src="../../assets/images/group_icon/orange_group_icon.png" alt="加载失败">
                  <img v-if="groupTotalIndex%2==0" src="@/assets/images/group_icon/purple_group_icon.png" alt="加载失败">
                  <div v-if="!groupTotalItem.showEdit">{{ groupTotalItem.groupName }}（{{ groupTotalItem.studentList.length }}人）</div>
                  <el-input maxlength="9" @blur="groupTotalItem.showEdit=false"
                            :class="groupTotalIndex%2==0?'reName':'reName_orange'" ref="reName"
                            v-if="groupTotalItem.showEdit" v-model="groupTotalItem.groupName"
                  ></el-input>
                  <i v-if="!groupTotalItem.showEdit" @click="delGroup(item,groupTotalIndex,groupTotalItem)"
                     class="el-icon-delete"
                  ></i>
                  <i :class="groupTotalIndex%2==0?'':'edit_orange'" v-if="!groupTotalItem.showEdit"
                     @click="showRename(groupTotalItem)" class="el-icon-edit"
                  ></i>
                </div>
                <div class="group_stu_all">
                  <vuedraggable
                    @change="handleChange"
                    v-model="groupTotalItem.studentList"
                    group="site"
                    animation="300"
                  >
                    <div class="group_stu_item" style="cursor: pointer;user-select: none"
                         v-for="(studentItem,studentIndex) in groupTotalItem.studentList" :key="studentItem.studentId"
                    >
                      <div class="tags_all">
                        {{ studentItem.studentName }}
                        <img v-if="studentItem.isLeader" src="@/assets/images/group_icon/tags_icon.png" alt="加载失败">
                      </div>
                      <div class="set_tags_all">
                        {{ studentItem.studentNum }}
                        <el-tooltip class="item" effect="dark" content="设置组长" placement="top">
                          <div @click="setLeader(studentItem,groupTotalItem)" v-if="!studentItem.isLeader && studentItem.manualScore==null"
                               class="set_tags_icon"
                          >
                            <img src="@/assets/images/group_icon/set_tags_icon.png" alt="加载失败">
                          </div>
                        </el-tooltip>
                        <i @click="delStuByGroup(groupTotalItem,studentIndex,studentItem)" class="el-icon-error"></i>
                        <i @click="delStuByGroup(groupTotalItem,studentIndex,studentItem)" class="el-icon-circle-close"
                        ></i>
                      </div>
                    </div>
                  </vuedraggable>
                </div>

              </div>
            </div>
            <div class="group_empty" v-else>
              <img src="@/assets/images/group_icon/group_empty.png" alt="加载失败">
              <div class="text">暂无分组</div>
            </div>
            <div class="bottom_btn">
              <el-button @click="addGroup" icon="el-icon-plus">小组</el-button>
              <el-button v-preventReClick type="primary" @click="checkGroup">保存</el-button>
            </div>
          </div>
        </template>
      </div>
      <!--  快速分组  -->
      <el-dialog
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        title="快速分组"
        :visible="quickGroupDialog"
        width="500px"
        append-to-body
        @close="cancel()"
      >
        <div class="all_settings">
          <div class="item">
            <div class="label"><span>*</span> 每组人数</div>
            <el-input-number controls-position="right" class="value" v-model="setParams.personNum" :min="1"
            ></el-input-number>
          </div>
          <div class="item">
            <div class="label"><span>*</span> 小组成员</div>
            <el-radio-group v-removeAriaHidden v-model="setParams.personType" size="small">
              <el-radio :label="1" border>创建空组</el-radio>
              <el-radio :label="2" border>成员随机</el-radio>
            </el-radio-group>
          </div>
          <div class="item">
            <div class="label"><span>*</span> 组长设定</div>
            <el-radio-group v-removeAriaHidden v-model="setParams.leaderType" size="small">
              <el-radio :label="1" border>组长教师配置</el-radio>
              <el-radio :label="2" border>组长随机</el-radio>
            </el-radio-group>
          </div>

        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="confirm">确 认</el-button>
        </div>
      </el-dialog>
      <!--  添加学员  -->
      <el-dialog
        style="margin-top: 15vh;"
        title="添加学员"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :visible="addStuDailog"
        width="500px"
        append-to-body
        @close="cancelAddStu()"
      >
        <el-form
          ref="addStuForm"
          :model="addStuForm"
          :rules="rules"
          label-width="80px"
        >
          <el-form-item label="学员" prop="studentIds" placeholder="请选择学员">
            <el-cascader
              size="small"
              filterable
              :show-all-levels="false"
              :options="students"
              :props="{
              emitPath: false,
              multiple: true,
              label: 'studentNum',
              value: 'studentId',
              children: 'children',
            }"
              v-model="addStuForm.studentIds"
            ></el-cascader>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancelAddStu">取 消</el-button>
          <el-button @click="addStudentList" type="primary">确 认</el-button>
        </div>
      </el-dialog>
    </div>
  </backContainer>
</template>

<script>
import { getUnGroupStudentList, getGroupInfoList, saveGroupInfo } from '@/api/course/groupSetup'
import { getOutsideStudentList, putCourseStudentList } from '@/api/home'
import { v4 as uuidv4 } from 'uuid'
import vuedraggable from 'vuedraggable'

export default {
  name: 'groupSetup',
  components: {
    vuedraggable
  },
  data() {
    return {
      studentCount: 0,
      studyingCount: 0,
      addStuDialog: false,
      loading: false,
      setParams: {
        personNum: 1,
        personType: 1,
        leaderType: 1
      },
      quickGroupDialog: false,
      addStuForm: {
        studentIds: []
      },
      students: [],
      rules: {
        studentIds: [
          { required: true, message: '请选择学员', trigger: 'blur' }
        ]
      },
      courseDetial: {},
      //拖拽之前的数据
      oldGroupTotalList: [],
      dataArr: [
        {
          typeName: 'left',
          groupType: 0,
          courseInfo: {},
          groupList: []
        },
        {
          typeName: 'right',
          groupTotalList: []
        }
      ]
    }
  },
  created() {
    let courseInfo = localStorage.getItem('COURSE_INFO')
    if (courseInfo) {
      this.courseDetial = JSON.parse(courseInfo)
      this.dataArr[0].courseInfo = JSON.parse(courseInfo)
      this.getUnGroupStudentList(this.courseDetial.courseSchedulingId)
      this.getGroupInfoList(this.courseDetial.courseSchedulingId)
    }
  },
  methods: {
    //锚点跳转
    scrollToAnchor(id) {
      const anchor = document.getElementById(id)
      if (anchor) {
        anchor.scrollIntoView({ behavior: 'smooth' })
      }
    },
    cancelAddStu() {
      this.addStuDailog = false
      this.$refs['addStuForm'].resetFields()
    },
    addStudentList() {
      this.$refs['addStuForm'].validate(async(valid) => {
        if (valid) {
          let studentIds = this.addStuForm.studentIds.join(',')
          const loading = this.$loading({
            lock: true,
            text: `正在添加...`,
            spinner: 'el-icon-loading',
            background: 'rgba(255, 255, 255, 0.3)'
          })
          let res
          try {
            res = await putCourseStudentList(this.courseDetial.courseSchedulingId, studentIds)
            if (res.code == 200) {
              loading.close()
              this.$modal.msgSuccess('添加成功')
              this.addStuDailog = false
              this.getUnGroupStudentList(this.courseDetial.courseSchedulingId)
              this.getGroupInfoList(this.courseDetial.courseSchedulingId)
            } else {
              loading.close()
            }
          } catch (e) {
            loading.close()
          }
        } else {
          return false
        }
      })
    },
    async getOutsideStudentList() {
      let res = await getOutsideStudentList(this.courseDetial.courseSchedulingId)
      const { code, data } = res
      if (code == 200) {
        let obj = {
          studentNum: '全选',
          studentId: 0,
          children: data
        }
        if (data.length > 0) {
          this.students = [obj]
        } else {
          this.students = []
        }
      }
    },
    showAddStu() {
      this.getOutsideStudentList()
      this.addStuDailog = true
    },
    confirm() {
      let arr = this.groupStudents(this.dataArr[0].groupList, this.setParams.personNum, this.setParams.personType, this.setParams.leaderType)
      if (this.setParams.personType == 2) {
        this.dataArr[0].groupList = []
      }
      this.dataArr[1].groupTotalList = arr
      this.setParams = {
        personNum: 1,
        personType: 1,
        leaderType: 1
      }
      this.quickGroupDialog = false
    },
    groupStudents(studentList, personNum, personType, leaderType) {
      let students = studentList.slice()
      let groups = []
      let leaderIndex = 0

      if (personType === 1) {
        for (let i = 0; i < students.length; i += personNum) {
          let group = {
            groupName: '第' + (groups.length + 1) + '组',
            showEdit: false,
            studentList: []
          }
          groups.push(group)
        }
      } else if (personType === 2) {
        students.sort(() => Math.random() - 0.5)

        while (students.length > 0) {
          let group = {
            groupName: '第' + (groups.length + 1) + '组',
            sort: groups.length + 1,
            showEdit: false,
            studentList: []
          }

          for (let i = 0; i < personNum && students.length > 0; i++) {
            let student = students.shift()
            let member = {
              studentId: student.studentId,
              studentName: student.studentName,
              studentNum: student.studentNum,
              isLeader: false
            }

            if (leaderType === 2 && i === 0) {
              member.isLeader = true
              leaderIndex++
            }

            group.studentList.push(member)
          }

          groups.push(group)
        }
      }

      return groups
    },
    cancel() {
      this.setParams = {
        personNum: 1,
        personType: 1,
        leaderType: 1
      }
      this.quickGroupDialog = false
    },
    showGroupDialog() {
      for (const argument of this.dataArr[1].groupTotalList) {
        if (argument.studentList && argument.studentList.length > 0) {
          this.$modal.msgWarning('请先清空已有分组！')
          return
        }
      }
      this.quickGroupDialog = true
    },
    showRename(item) {
      console.log(item, 'item')
      item.showEdit = true

      this.$nextTick(() => {
        console.log(this.$refs.reName, 'this.$refs.reName')
        this.$refs['reName'][0].focus()
      })

    },
    delGroup(item, index) {
      if (item.groupTotalList[index].studentList.length > 0) {
        this.$confirm(`是否确定删除【${item.groupTotalList[index].groupName}】？`, {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          for (const itemElement of item.groupTotalList[index].studentList) {
            itemElement.isLeader = false
          }
          console.log(item.groupTotalList[index].studentList, 'studentList')
          this.dataArr[0].groupList.unshift(...item.groupTotalList[index].studentList)

          item.groupTotalList.splice(index, 1)
        }).catch(() => {
          this.$modal.msgInfo('已取消')
        })
      } else {
        item.groupTotalList.splice(index, 1)
      }
    },
    addGroup() {
      let item = {
        groupId: uuidv4(),
        needDelete: true,
        groupName: `第${this.dataArr[1].groupTotalList.length + 1}组`,
        sort: this.dataArr[1].groupTotalList.length + 1,
        showEdit: false,
        studentList: []
      }
      this.dataArr[1].groupTotalList.push(item)
      this.$nextTick(() => {
        this.scrollToAnchor(item.groupId)
      })
    },
    //对比新旧组信息，输出小组变化内容
    compareStudentLists(initialArray, finalArray) {
      // 创建一个对象来存储每个学生所在的组和组长信息
      const studentGroups = {}

      initialArray.forEach(group => {
        group.studentList.forEach(student => {
          studentGroups[student.studentId] = {
            groupId: group.groupId,
            isLeader: student.isLeader
          }
        })
      })
      let changeDescription = ''
      finalArray.forEach(group => {
        group.studentList.forEach(student => {
          if (studentGroups[student.studentId] && studentGroups[student.studentId].groupId !== group.groupId) {
            const initialGroupName = initialArray.find(g => g.groupId === studentGroups[student.studentId].groupId).groupName
            console.log(initialGroupName, 'initialGroupName')
            const finalGroupName = group.groupName
            changeDescription += `${student.studentName} 从 【${initialGroupName}】 移动至 【${finalGroupName}】 <br>`
          }
          if (studentGroups[student.studentId] && student.isLeader !== studentGroups[student.studentId].isLeader) {
            console.log(studentGroups, 'studentGroups')
            const initialLeader = initialArray.find(g => g.groupId === studentGroups[student.studentId].groupId).studentList.find(s => s.isLeader)
            const finalLeader = student.studentName
            if (student.isLeader) {
              if (initialLeader) {
                changeDescription += `【${group.groupName}】组长有变化，由${initialLeader.studentName}变为了${finalLeader} <br>`
              } else {
                changeDescription += `【${group.groupName}】组长有变化，变为了${finalLeader} <br>`
              }
            } else {
              // changeDescription += `${group.groupName}组长有变化，${initialLeader}不再是组长<br>`;
            }
          }
        })
      })

      return changeDescription
    },
    async saveGroup() {
      let arr = this.dataArr[1].groupTotalList
      let groups = []
      if (arr.length > 0) {
        for (const [index, arrElement] of arr.entries()) {
          let obj = {
            classId: this.dataArr[0].courseInfo.classTeachingId,
            courseId: this.dataArr[0].courseInfo.courseId,
            courseSchedulingId: this.dataArr[0].courseInfo.courseSchedulingId,
            groupName: arrElement.groupName,
            groupId: arrElement.needDelete ? '' : arrElement.groupId,
            sort: index + 1,
            studentIds: '',
            ccCourseGroupMemberList: arrElement.studentList,
            leaderId: ''
          }
          let studentIds = []
          for (const stuItem of arrElement.studentList) {
            if (!stuItem.isLeader) {
              studentIds.push(stuItem.studentId)
            } else {
              obj.leaderId = stuItem.studentId
              studentIds.unshift(stuItem.studentId)
            }
            obj.studentIds = studentIds.join(',')
          }
          groups.push(obj)
        }
      }
      const loading = this.$loading({
        lock: true,
        text: '正在保存中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.3)'
      })
      let res = await saveGroupInfo(this.$route.query.courseSchedulingId, groups)
      if (res.code == 200) {
        loading.close()
        this.$modal.msgSuccess('保存成功')
        //更新oldGroupTotalList  为保存后的数组
        let dropedArr = this.dataArr[1].groupTotalList
        this.oldGroupTotalList = JSON.parse(JSON.stringify(dropedArr))
      } else {
        loading.close()
      }
    },
    async checkGroup() {
      for (const [index, item] of this.dataArr[1].groupTotalList.entries()) {
        if (!item.groupName) {
          this.$modal.msgWarning(`请为第【${index + 1}】组添加小组名称`)
          this.scrollToAnchor(item.groupId)
          return
        }
        if (item.studentList.length == 0) {
          this.$modal.msgWarning(`请为【${item.groupName}】添加成员或删除该分组`)
          this.scrollToAnchor(item.groupId)
          return
        }
        let hasLeader = item.studentList.some(student => student.isLeader === true)
        if (!hasLeader) {
          this.$modal.msgWarning(`请设置【${item.groupName}】里的组长`)
          this.scrollToAnchor(item.groupId)
          // 如果没有满足条件的元素，就返回
          return
        }
      }
      let resStr
      if (this.oldGroupTotalList.length > 0) {
        let dropedArr = this.dataArr[1].groupTotalList
        console.log(this.oldGroupTotalList, 'this.oldGroupTotalList')
        console.log(dropedArr, 'dropedArr')
        resStr = this.compareStudentLists(this.oldGroupTotalList, dropedArr)
      }
      if (!resStr) {
        this.saveGroup()
      } else {
        resStr += '以上是分组信息变化，是否保存？'
        this.$confirm(resStr, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          dangerouslyUseHTMLString: true,
          type: 'warning'
        }).then(() => {
          this.saveGroup()
        }).catch(() => {
          this.$modal.msgInfo('已取消')
        })
      }
    },
    setLeader(item, parentItem) {
      console.log(item, 'item')
      console.log(parentItem, 'parentItem')
      for (const parentStuItem of parentItem.studentList) {
        parentStuItem.isLeader = parentStuItem.studentId == item.studentId
      }
    },
    delStuByGroup(item, index, studentItem) {
      studentItem.isLeader = false
      this.dataArr[0].groupList.unshift(studentItem)
      item.studentList.splice(index, 1)
    },
    async getUnGroupStudentList(courseSchedulingId) {
      let res = await getUnGroupStudentList(courseSchedulingId)
      const { code, data } = res
      if (code == 200) {
        if (data.length > 0) {
          let arr = []
          for (const dataElement of data) {
            let obj = {
              ...dataElement,
              isLeader: false
            }
            arr.push(obj)
          }
          this.dataArr[0].groupList = arr
        }
      }
    },
    async getGroupInfoList(courseSchedulingId) {
      this.loading = true
      let res = await getGroupInfoList(courseSchedulingId)
      const { code, data } = res
      if (code == 200) {
        this.studentCount = data.studentCount
        this.studyingCount = data.studyingCount
        let arr = []
        for (const datum of data.groupList) {
          let obj = {
            groupName: datum.groupName,
            showEdit: false,
            studentList: [],
            groupId: datum.groupId
          }
          if (datum.ccCourseGroupMemberList.length > 0) {
            for (const ccCourseGroupMemberListElement of datum.ccCourseGroupMemberList) {
              let item = {
                ...ccCourseGroupMemberListElement,
                isLeader: false
              }
              item.isLeader = ccCourseGroupMemberListElement.studentId == datum.leaderId
              obj.studentList.push(item)
            }
          }
          arr.push(obj)
        }
        this.loading = false
        this.oldGroupTotalList = JSON.parse(JSON.stringify(arr))
        this.dataArr[1].groupTotalList = arr
      }
    },
    handleChange(e) {
      if (e.moved) {
        return
      }
      console.log(e, 'hhhhh')
      if (e.added) {
        console.log(!e.added, 'added')
        e.added.element.isLeader = false
      }
      if (e.removed) {
        console.log(!e.removed, 'removed')
      }
      console.log(this.dataArr[1].groupTotalList, 'lkl;lklkklkklk')
    }
  }
}
</script>

<style scoped lang="scss">
.group_container {
  width: 1200px;
  height: calc(100vh - 96px);
  /* 页面整体布局 */
  .content {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 30px 0;
    /* 左侧内容样式 */
    .content_left {
      width: 272px;

      .left_top {
        width: 100%;
        height: 250px;
        background: #FFFFFF;
        border-radius: 16px;
        padding: 24px;
        box-sizing: border-box;

        .courseName {
          display: flex;
          align-items: center;

          .icon {
            width: 24px;
            height: 24px;
          }

          .text {
            width: 200px;
            font-size: 16px;
            font-family: PingFangSC, PingFang SC, sans-serif;
            font-weight: 600;
            color: #333333;
            margin-left: 6px;
          }
        }

        .className {
          .text {
            width: 200px;
            font-size: 16px;
            font-family: PingFangSC, PingFang SC, sans-serif;
            color: #999999;
            margin: 4px 0 0 30px;
          }
        }

        .all_class_person {
          margin: 16px 0 0 11px;
          display: flex;
          align-items: center;

          .icon {
            width: 16px;
            height: 16px;
          }

          .text {
            margin-left: 8px;
            font-size: 16px;
            font-family: PingFangSC, PingFang SC, sans-serif;
            font-weight: 400;
            color: #999999;

            span {
              color: #333333;
            }
          }
        }

        .application {
          margin: 8px 0 0 11px;
          display: flex;
          align-items: center;
          justify-content: space-between;

          .detial {
            display: flex;
            align-items: center;

            .icon {
              width: 16px;
              height: 16px;
            }

            .text {
              margin-left: 8px;
              font-size: 16px;
              font-family: PingFangSC, PingFang SC, sans-serif;
              font-weight: 400;
              color: #999999;

              span {
                color: #333333;
              }
            }
          }

          .btn {
            width: 60px;
            height: 20px;
            background: #F7F9FA;
            border-radius: 4px;
            border: 1px solid #EDEFF0;
            font-size: 12px;
            font-family: PingFangSC, PingFang SC, sans-serif;
            font-weight: 400;
            color: #28B28B;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            user-select: none;
          }

          .btn:hover {
            //color: #f7f9fa;
            //background: #28B28B;
          }

          .btn:active {
            color: #1fc193;
            background: #EDEFF0;
          }
        }

        .quick_group {
          margin-top: 54px;
          width: 224px;
          height: 32px;
          background: rgba(78, 141, 255, 0.1);
          border-radius: 8px;
          border: 1px solid rgba(78, 141, 255, 0.35);
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
          user-select: none;

          .icon {
            width: 20px;
            height: 20px;
          }

          .text {
            margin-left: 8px;
            font-size: 14px;
            font-family: PingFangSC, PingFang SC, sans-serif;
            font-weight: 400;
            color: #4E8DFF;
          }
        }

        .quick_group:active {
          background: rgba(78, 141, 255, 0.2);
        }
      }

      .left_bottom {
        margin-top: 10px;
        width: 100%;
        background: #FFFFFF;
        border-radius: 16px;
        padding: 24px 0;
        box-sizing: border-box;

        .title_box {
          width: 100%;
          display: flex;
          justify-content: center;

          .title {
            width: 224px;
            height: 32px;
            background: #F7F9FA;
            border-radius: 8px;
            border: 1px solid #EDEFF0;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #28B28B;
          }
        }

        .stu_all {
          width: 100%;
          height: calc(100vh - 492px);
          padding: 0 24px;
          box-sizing: border-box;
          overflow: auto;
          margin-top: 24px;

          .stu_item {
            cursor: pointer;
            user-select: none;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 16px;
            font-family: PingFangSC, PingFang SC, sans-serif;
            font-weight: 400;
            color: #666666;
            margin-bottom: 20px;
          }

          .stu_item:last-child {
            margin-bottom: 0;
          }

          .stu_item:hover {
            color: #333333;
          }
        }
      }
    }

    /* 右侧内容样式 */
    .content_right {
      position: relative;
      flex: 1;
      margin-left: 20px;
      background: #FFFFFF;
      border-radius: 16px;
      padding: 24px;
      box-sizing: border-box;

      .group_tip {
        color: #f56c6c;
        margin-bottom: 20px;
      }

      .right_item_all {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        height: calc(100vh - 280px);
        overflow: auto;

        .right_item {
          width: 260px;
          height: 280px;
          border-radius: 12px;
          margin: 0 32px 32px 0;

          .group_name {
            display: flex;
            align-items: center;
            height: 56px;
            padding-left: 16px;
            box-sizing: border-box;
            font-size: 16px;
            font-family: PingFangSC, PingFang SC, sans-serif;
            font-weight: 600;
            color: #333333;
            position: relative;

            .reName {
              width: 80%;
            }

            .reName_orange {
              width: 80%;
            }

            .el-icon-delete {
              position: absolute;
              right: 20px;
              cursor: pointer;
              user-select: none;
              display: none;
              color: #e95756;
              z-index: 12;
            }

            .el-icon-edit {
              position: absolute;
              right: 44px;
              display: none;
              cursor: pointer;
              user-select: none;
              color: #7542ff;
              z-index: 12;
            }

            img {
              width: 24px;
              height: 24px;
              margin-right: 8px;
            }
          }

          .group_stu_all {
            width: 100%;
            height: 188px;
            padding: 0 10px 0 16px;
            box-sizing: border-box;
            overflow: auto;
            margin-top: 16px;

            .group_stu_item {
              cursor: pointer;
              user-select: none;
              width: 100%;
              display: flex;
              align-items: center;
              justify-content: space-between;
              font-size: 16px;
              font-family: PingFangSC, PingFang SC, sans-serif;
              font-weight: 400;
              color: #666666;
              margin-top: 20px;
              line-height: 22px;

              .tags_all {
                display: flex;
                align-items: center;

                img {
                  margin-left: 4px;
                }
              }

              .set_tags_all {
                display: flex;
                align-items: center;

                .set_tags_icon {
                  display: none;
                  padding: 0 2px;
                  box-sizing: border-box;
                  transition: all 1s ease;
                }

                .el-icon-error {
                  display: none;
                  color: #e95756;
                  font-size: 16px;
                  padding: 0 2px;
                }

                .el-icon-circle-close {
                  color: #e95756;
                  font-size: 16px;
                  padding: 0 2px;
                }
              }

            }

            .group_stu_item:first-child {
              margin-top: 0;
            }

            .group_stu_item:hover {
              color: #333333;

              .el-icon-error {
                display: inline-block;
              }

              .el-icon-circle-close {
                display: none;
              }

              .set_tags_icon {
                display: inline-block;
              }
            }
          }
        }

        .right_item:nth-child(3n) {
          /* 添加样式 */
          margin: 0 0 32px 0;
        }

        .right_item:hover {
          .group_name {
            .el-icon-delete {
              display: inline-block;
            }

            .el-icon-edit {
              display: inline-block;
            }
          }
        }
      }

      .group_empty {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        user-select: none;

        img {
          width: 112px;
          height: 101px;
        }

        .text {
          margin: 20px 8px 0 0;
          font-size: 12px;
          font-family: PingFangSC, PingFang SC, sans-serif;
          font-weight: 400;
          color: #999999;
          line-height: 17px;
        }
      }

      .bottom_btn {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: absolute;
        bottom: 0;
        right: 0;
        width: 100%;
        border-radius: 0 0 16px 16px;
        border-top: 1px solid #EDEFF0;
        padding: 20px;
        box-sizing: border-box;
      }
    }
  }
}

.purple_them {
  background: #F5F7FF;
  border: 1px solid #DAE1FA;

  .group_name {
    border-bottom: 1px solid #DAE1FA;
  }
}

.orange_them {
  background: #FEF5F3;
  border: 1px solid #FFE8E3;

  .group_name {
    border-bottom: 1px solid #FFE8E3;
  }
}

.edit_orange {
  color: #ff7b5e !important;
}

.reName ::v-deep .el-input__inner {
  background: transparent;
}

.reName ::v-deep .el-input__inner:focus {
  border-color: #7542ff !important;
}

.reName_orange ::v-deep .el-input__inner {
  background: transparent;
}

.reName_orange ::v-deep .el-input__inner:focus {
  border-color: #ff7b5e !important;
}

.all_settings {
  width: 100%;

  .item {
    display: flex;
    align-items: center;
    margin: 0 0 20px 0;

    .label {
      width: 80px;
      font-size: 14px;
      font-weight: bold;

      span {
        color: red;
      }
    }
  }
}


/* 拖拽区域样式 */
.vuedraggable {
  margin-top: 10px;
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  padding: 10px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

/* 拖拽项样式 */
.vuedraggable div {
  margin-bottom: 5px;
  padding: 8px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 3px;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
  cursor: grab;
}

/* 拖拽时的样式 */
.vuedraggable div.dragging {
  opacity: 0.5;
}

/* 拖拽项悬停样式 */
.vuedraggable div.dragging-over {
  background-color: #e0e0e0; /* 调整悬停时的背景色 */
  transition: background-color 0.3s ease; /* 添加过渡效果 */
}
</style>
